<!--用户的退款订单-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item prop="orderId">
          <el-input v-model="dataForm.orderId" placeholder="请输入订单id" clearable></el-input>
        </el-form-item>
        <el-form-item prop="refundStatus">
          <ren-select v-model="dataForm.refundStatus" dict-type="refund_status" placeholder="请选择退货处理状态"></ren-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="createDateList"
              type="daterange"
              placeholder="请选择创建日期"
              format="yyyy 年 MM 月 dd 日"
              range-separator="至"
              start-placeholder="开始创建日期"
              end-placeholder="结束创建日期"
              value-format="yyyy-MM-dd"
              class=""
              @change="createCK"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item v-if="$hasPermission('api:exportRefund:export')">
          <el-button @click="exportHandle()" type="info">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe highlight-current-row
                @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
                ref="multipleTable" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="orderId" label="订单id" header-align="center" align="center" width=""></el-table-column>
        <el-table-column prop="userId" label="用户信息" header-align="center" align="center" width="180">
          <template slot-scope="{}" slot="header">
            <!-- 表头名称 -->
            <span>用户信息</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <i class="el-icon-question" style="font-size:16px;"></i>
              <!-- 悬停提示内容 -->
              <div slot="content">
                <div>点击下方名称查看用户详细信息</div>
              </div>
            </el-tooltip>
          </template>
          <template slot-scope="{row}">
            <div class="flex_rows flex_center" @click="showUserList(row['userDTO'])" v-if="row['userDTO']">
              <el-avatar size="large" :src="row['userDTO']['avatar']"></el-avatar>
              <div class="flex_columns" style="margin-left: 10px;">
                <div class="flex_rows" style="text-decoration: underline;cursor: pointer;">ID:{{row['userDTO']['id']}}</div>
                <div class="flex_rows flex_center" style="text-decoration: underline;cursor: pointer;">
                  <div class="ellipsis1" style="max-width: 4em;">
                    {{row['userDTO']['nickname']}}
                  </div>
                  ({{row['userDTO']['identity']}})
                </div>
              </div>
            </div>
            <div v-if="!row['userDTO']">{{row.userId}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="mchid" label="商户id" header-align="center" align="center" width="110"></el-table-column>
        <el-table-column prop="currency" label="退款币种" header-align="center" align="center" width="90"></el-table-column>
        <el-table-column prop="refund" label="退款金额" header-align="center" align="center" width="90">
          <template slot-scope="{row}">
            <div>{{ formatNumber(row.refund)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="订单金额" header-align="center" align="center" width="90">
          <template slot-scope="{row}">
            <div>{{ formatNumber(row.total)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="退款原因" header-align="center" align="center" width="100">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" :content="row.reason" placement="top">
              <div>{{ row.reason }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="transactionId" label="微信支付订单号" header-align="center" align="center" width="130"></el-table-column>
        <el-table-column prop="refundStatus" label="处理状态" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <el-tag v-if="row.refundStatus === 'PROCESSING'" size="small" type="primary">{{ $getDictLabel("refund_status", row.refundStatus)}}</el-tag>
            <el-tag v-if="row.refundStatus === 'CLOSED'" size="small" type="warning">{{ $getDictLabel("refund_status", row.refundStatus)}}</el-tag>
            <el-tag v-if="row.refundStatus === 'SUCCESS'" size="small" type="success">{{ $getDictLabel("refund_status", row.refundStatus)}}</el-tag>
            <el-tag v-if="row.refundStatus === 'APPLY'" size="small" type="primary" effect="plain">{{ $getDictLabel("refund_status", row.refundStatus)}}</el-tag>
            <el-tag v-if="row.refundStatus === 'ABNORMAL'" size="small" type="danger">{{ $getDictLabel("refund_status", row.refundStatus)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期" header-align="center" align="center" width=""></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="240">
          <template slot-scope="scope">
            <div class="flex_row_reverse flex_wrap">
              <el-link v-if="$hasPermission('api:agreedRefund:update') && scope.row.refundStatus === 'APPLY' || scope.row.refundStatus === 'ABNORMAL'"
                       type="primary"
                         @click="agreedRefund(scope.row.id,scope.row.reason)">同意退款
              </el-link>
              <el-link v-if="$hasPermission('api:userRefund:update')&&scope.row.refundStatus === 'APPLY'"
                       type="primary"
                         @click="userRefund(scope.row.id)">关闭
              </el-link>
              <el-link  v-if="$hasPermission('api:getOrder:query')" type="primary"
                          @click="getOrderList(scope.row)">关联订单</el-link>
            </div>

          </template>
        </el-table-column>

      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                     layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <user-order-product-list v-if="isUserOrderProductList" ref="UserOrderProductList" @cancellation="$refs.multipleTable.clearSelection()"></user-order-product-list>
      <!--查看用户信息组件-->
      <com-user-list :visible.sync="showUser" :content="content"></com-user-list>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './userRefundAddOrUpdate.vue'
import UserOrderProductList from './userOrderProductList.vue'
import {formatNumber} from "../../../utils";
//微信订单
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/userRefund/page',
        getDataListIsPage: true,
        deleteURL: '/api/userRefund',
        deleteIsBatch: true,
        exportURL: '/api/userRefund/exportRefund' // 导出接口，API地址
      },
      showUser:false,                   //是否显示用户信息
      showProduct:false,                   //是否显示信息
      contentProduct:{},                   //信息内容
      isUserOrderProductList: false,    //订单详情弹窗
      content:{},                       //用户信息内容
      createDateList: [],               //创建时间数组
      dataForm: {
        id: '',                        //退货订单id
        mchid:'',                      //	商户ID
        orderId:'',                    //订单id
        currency: '',                  //退款币种
        refund: '',                    //退款金额
        total: '',                     //原订单金额
        reason: '',                    //退款的原因
        refundId: '',                  //退款ID
        transactionId: '',             //微信支付订单号
        refundStatus: '',              //记录退款的处理状态，如待处理、处理中、已完成
        userId: '',                    //关联到用户表的ID，用于与用户进行关联，表示发起退款的用户
        createDateStart: '',           //开始创建时间
        createDateEnd: '',             //结束创建时间
      },
      timeList:[]                          //时间戳数组
    }
  },
  components: {
    AddOrUpdate,
    UserOrderProductList
  },
  watch: {
    '$route':'getPath'
  },
  created() {
    if (this.$route.query.orderId){
      this.mixinViewModuleOptions.createdIsNeed = false
      this.dataForm.orderId = this.timeList.includes(this.$route.query.time)?'': this.$route.query.orderId
      let _this = this
      setTimeout(function() {
        _this.getDataList()//查询数据
      }, 300)
    }else {
      // console.log(this.dataForm)
      this.mixinViewModuleOptions.createdIsNeed = true
      this.getDataList()//查询数据
    }
    this.timeList.push(this.$route.query.time)
  },
  methods: {
    formatNumber,
    //监听路由变化
    getPath(){
      if (this.$route.query.orderId){
        this.mixinViewModuleOptions.createdIsNeed = false
        this.dataForm.orderId = this.timeList.includes(this.$route.query.time)?'': this.$route.query.orderId
        this.getDataList()//查询数据
      }else {
        this.mixinViewModuleOptions.createdIsNeed = true
        this.dataForm.orderId = ''
        this.getDataList()//查询数据
      }
      this.timeList.push(this.$route.query.time)
    },
    /*创建时间选择*/
    createCK() {
      if (!this.createDateList){
        this.dataForm.createDateStart = ''
        this.dataForm.createDateEnd = ''
        return
      }
      this.dataForm.createDateStart = this.createDateList[0]
      this.dataForm.createDateEnd = this.createDateList[1]
    },
    //显示用户信息
    showUserList(content){
      this.showUser=true;
      this.content= content;
    },
    //查看订单信息
    getOrderList(item){
      this.$refs.multipleTable.toggleRowSelection(item);
      this.isUserOrderProductList = true
      this.$nextTick(() => {
        this.$refs.UserOrderProductList.dataForm.id = item.orderId
        this.$refs.UserOrderProductList.init()
      })
    },
    //订单退款
    agreedRefund(id,reason) {
      this.$prompt('请输入退款原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue:reason,
        // inputPattern: /S/,
        // inputErrorMessage: '退款理由不能为空'
      }).then(({ value }) => {
        const data = {
          id: id,
          reason: value
        }
        this.$http.put('/api/userRefund/agreedRefund', data).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.getDataList()
        }).catch(err => {
          //console.log(err)
          this.$message({
            type: 'error',
            message: err.msg || '操作失败'
          })
        })
      }).catch(() => {
      });
    },
    //订单关闭
    userRefund(id) {
      this.$confirm('此操作将关闭用户退款订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: id,
          refundStatus:'CLOSED'
        }
        this.$http.put('/api/userRefund', data).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.getDataList()
        }).catch(err => {
          //console.log(err)
          this.$message({
            type: 'error',
            message: err.msg || '操作失败'
          })
        })
      }).catch(() => {
      });
    }
  }
}
</script>
<style lang="scss">
.el-button{
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
